<!--  -->
<template>
  <div id="StoreList">
    <div class="hint">
      <hint></hint>
    </div>
    <div class="search">
      <div class="he">
        <p><span>店铺筛选</span></p>
        <div class="input">
          <span>店铺名称</span>
          <el-input
            placeholder="请输入店铺名称"
            v-model="input"
            clearable
          ></el-input>
          <el-button type="primary" icon="el-icon-search" @click="query">查询</el-button>
        </div>
      </div>
    </div>
    <div class="list">
      <div class="list_header">
        <p>店铺列表</p>
        <el-button type="primary" icon="el-icon-plus" @click="storeadd"
          >添加店铺</el-button
        >
      </div>
      <div class="list_content">
        <el-table
          :data="
            tableData.slice(
              (currentPage - 1) * pagesize,
              currentPage * pagesize
            )
          "
          style="width: 100%"
        >
          <el-table-column
            label="序号"
            width="60"
            type="index"
            align="center"
          ></el-table-column>
          <el-table-column
            label="店铺名称"
            width="265"
            prop="shopname"
            align="center"
          ></el-table-column>
          <el-table-column
            label="所属分区"
            width="149"
            prop="partition"
            align="center"
          ></el-table-column>
          <el-table-column
            label="所属品牌"
            width="110"
            prop="name"
            align="center"
          ></el-table-column>
          <el-table-column
            label="店铺地址"
            width="253"
            prop="storeaddress"
            align="center"
          ></el-table-column>
          <el-table-column
            label="联系人"
            width="114"
            prop="linkman"
            align="center"
          ></el-table-column>
          <el-table-column
            label="电话"
            width="147"
            prop="phone"
            align="center"
          ></el-table-column>
          <el-table-column
            label="营业状态"
            width="151"
            prop="select"
            align="center"
          ></el-table-column>
          <el-table-column label="操作" align="center">
            <template slot-scope="scope">
              <el-button
                size="mini"
                type="danger"
                @click="handleDelete(scope.$index, scope.row)"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="pagebreak">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[2, 5, 10, 20, 40]"
          :page-size="pagesize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="tableData.length"
        >
        </el-pagination>
      </div>
    </div>
    <div id="mask">
      <div class="inmask">
        <el-input
          type="text"
          placeholder="店铺名称"
          v-model="shopnametext"
          maxlength="10"
          show-word-limit
          rules=""
        ></el-input>

        <el-select
          v-model="partitiontext"
          slot="prepend"
          placeholder="所属分区"
        >
          <el-option label="东" value="东"></el-option>
          <el-option label="南" value="南"></el-option>
          <el-option label="西" value="西"></el-option>
          <el-option label="北" value="北"></el-option>
        </el-select>
        <el-select v-model="nametext" slot="prepend" placeholder="所属品牌">
          <el-option label="金牌" value="金牌"></el-option>
          <el-option label="银牌" value="银牌"></el-option>
          <el-option label="铜牌" value="铜牌"></el-option>
          <el-option label="盾牌" value="盾牌"></el-option>
        </el-select>
        <el-input
          type="text"
          placeholder="店铺地址"
          v-model="storeaddresstext"
          show-word-limit
        ></el-input>
        <el-input
          type="text"
          placeholder="联系人"
          v-model="linkmantext"
          show-word-limit
        ></el-input>
        <el-input
          type="text"
          placeholder="联系电话"
          v-model="phonetext"
          show-word-limit
        ></el-input>
        <el-select v-model="selecttext" slot="prepend" placeholder="营业状态">
          <el-option label="营业" value="营业"></el-option>
          <el-option label="休息" value="休息"></el-option>
          <el-option label="停业" value="停业"></el-option>
        </el-select>
        <el-button type="primary" @click="add">添加</el-button>
        <el-button type="info" @click="cancel">取消</el-button>
      </div>
    </div>
  </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';
import hint from "./header";

export default {
  //import引入的组件需要注入到对象中才能使用
  components: {
    hint: hint,
  },
  data() {
    //这里存放数据
    return {
      currentPage: 1,
      pagesize: 5,
      input: "",
      selecttext: "",
      shopnametext: "",
      partitiontext: "",
      nametext: "",
      storeaddresstext: "",
      linkmantext: "",
      phonetext: "",
      tableData: [],
    };
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    query:function(){
      this.tableData.forEach(function(item,index){
        console.log(index,item)
      })
    },
    storeadd: function () {
      document.getElementById("mask").style.display = "block";
    },
    cancel: function () {
      document.getElementById("mask").style.display = "none";
    },
    handleDelete: function (index) {
      this.tableData.splice(index, 1);
    },
    add: function () {
      if (
        this.nametext === "" ||
        this.selecttext === "" ||
        this.shopnametext === "" ||
        this.partitiontext === "" ||
        this.storeaddresstext === "" ||
        this.linkmantext === "" ||
        this.phonetext === ""
      ) {
        alert("请填写全部信息");
      } else {
        this.tableData.push({
          name: this.nametext,
          select: this.selecttext,
          shopname: this.shopnametext,
          partition: this.partitiontext,
          storeaddress: this.storeaddresstext,
          linkman: this.linkmantext,
          phone: this.phonetext,
        });
        alert("添加成功");
        this.nametext = "";
        this.selecttext = "";
        this.shopnametext = "";
        this.partitiontext = "";
        this.storeaddresstext = "";
        this.linkmantext = "";
        this.phonetext = "";
      }
    },
    handleSizeChange: function (size) {
      this.pagesize = size;
      console.log(this.pagesize);
    },
    handleCurrentChange: function (currentPage) {
      this.currentPage = currentPage;
      console.log(this.currentPage);
    },
    handleUserList() {
      this.$http.get("http://localhost:3000/tableData").then((res) => {
        this.tableData = res.body;
      });
    },
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
    this.$http
      .get("http://rap2api.taobao.org/app/mock/276742/getStoreList", {})
      .then((res) => {
        console.log(res.data.tableData);
        this.tableData = res.data.tableData;
      });
  },
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style  scoped>
#StoreList {
  position: relative;
  min-width: 1600px;
}
.search {
  width: 1390px;
  height: 114px;
  font-weight: 700;
  margin: 10px auto;
  background-color: #fff;
  border: 1px solid #e4e4e4;
  overflow: hidden;
}
.search p {
  font-family: "微软雅黑 Bold", "微软雅黑 Regular", "微软雅黑";
  font-weight: 700;
  font-style: normal;
  text-align: left;
  line-height: 50px;
  border-bottom: 1px solid #e4e4e4;
  font-size: 14px;
  color: #666;
}
.search span {
  margin-left: 20px;
}

.input {
  display: flex;
  border-radius: 0;
  margin-top: 12px;
}
.input span {
  font-family: "微软雅黑";
  font-weight: 400;
  font-style: normal;
  font-size: 12px;
  text-align: right;
  line-height: 40px;
  margin-left: 60px;
  margin-right: 20px;
}
.el-input {
  width: 322px;
  height: 35px;
  border-radius: 0;
  margin-right: 30px;
}

.list {
  width: 1390px;
  margin: 0 auto;
  background-color: #fff;
  border: 1px solid #e4e4e4;
  overflow: hidden;
  box-sizing: border-box;
  padding: 10px 5px;
  font-size: 14px;
  color: #666666;
}
.list_header {
  display: flex;
  justify-content: space-between;
  padding-right: 60px;
  margin-bottom: 10px;
  height: 50px;
}
.list_header p {
  line-height: 50px;
  padding: 0 20px;
}
.pagebreak {
  text-align: right;
  margin-top: 10px;
}
#mask {
  background-color: rgba(129, 148, 148, 0.5);
  position: absolute;
  width: 100%;
  height: 100vh;
  top: 0;
  left: 0;
  z-index: 999;
  display: none;
}
.inmask {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  width: 500px;
  height: 650px;
  background-color: #fff;
  box-sizing: border-box;
  padding: 30px 40px;
}

.inmask .el-button {
  width: 100%;
  display: block;
  margin-bottom: 30px;
}
.inmask .el-input {
  width: 100%;
  display: block;
  margin-bottom: 30px;
}
.el-button + .el-button {
  margin-left: 0;
}
.el-select {
  width: 420px;
  margin-bottom: 30px;
}
</style>